<template>
  <div class="medal">
    <!-- 导航栏 -->
    <van-nav-bar left-arrow fixed @click-left="onClickLeft" />
    <!-- 我的勋章文字 及金色勋章 -->
    <van-grid :border="false" :column-num="2">
      <van-grid-item>
        <h2>我的勋章</h2>
        <p>已获得0枚</p>
      </van-grid-item>
      <van-grid-item icon="/Medal/medal.jpg">
      </van-grid-item>
    </van-grid>
    <!-- 以下为我的勋章展示列表 -->
    <van-grid :border="false" :column-num="2" con-size="250px">
      <van-grid-item icon="/Medal/学习使我快乐鸭.jpg" text="学习使我快乐鸭">
      </van-grid-item>
      <van-grid-item icon="/Medal/石彦祖的去污皂.jpg" text="石彦祖的去污皂">
      </van-grid-item>
      <van-grid-item icon="/Medal/石麻麻牌捏脸机.jpg" text="石麻麻牌捏脸机">
      </van-grid-item>
      <van-grid-item icon="/Medal/小公举的碎花裙.jpg" text="小公举的碎花裙">
      </van-grid-item>
      <van-grid-item icon="/Medal/辉哥哥的小鹦鹉.jpg" text="辉哥哥的小鹦鹉">
      </van-grid-item>
      <van-grid-item icon="/Medal/蛋妞儿的小蛋壳.jpg" text="蛋妞儿的小蛋壳">
      </van-grid-item>
      <van-grid-item icon="/Medal/冬日高粽.jpg" text="冬日高粽">
      </van-grid-item>
      <van-grid-item icon="/Medal/盐值出粽.jpg" text="盐值出粽">
      </van-grid-item>
      <van-grid-item icon="/Medal/牛气冲天.jpg" text="牛气冲天">
      </van-grid-item>
      <van-grid-item icon="/Medal/百里挑一可爱虫.jpg" text="百里挑一可爱虫">
      </van-grid-item>
      <van-grid-item icon="/Medal/琢哥的小拖孩儿.jpg" text="琢哥的小拖孩儿">
      </van-grid-item>
      <van-grid-item icon="/Medal/高分鹿取.jpg" text="高分鹿取">
      </van-grid-item>
      <van-grid-item icon="/Medal/一飞冲天.jpg" text="一飞冲天">
      </van-grid-item>
      <van-grid-item icon="/Medal/石麻麻的大风车.jpg" text="石麻麻的大风车">
      </van-grid-item>
      <van-grid-item icon="/Medal/佛曰必过.jpg" text="佛曰必过">
      </van-grid-item>
      <van-grid-item icon="/Medal/让学习不难.jpg" text="让学习不难">
      </van-grid-item>
      <van-grid-item icon="/Medal/陈粑粑的小女鹅.jpg" text="陈粑粑的小女鹅">
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  methods:{
    onClickLeft(){
      this.$router.push("/weipersonal");
    }
  }

};
</script>
<style lang='scss'>
.medal {
  background-color: #fff;
  .van-nav-bar {
    background-color: #000;
    .van-icon{
      color: #fff;
    }
  }
  > :nth-child(2) {
    margin-top: 35px;
    background-color: #000;
    > :nth-child(1) .van-grid-item__content {
      background-color: #000;
    }
    > :nth-child(2) .van-grid-item__content {
      background-color: #000;
    }
    h2 {
      color: #FFCB00;
      margin-bottom: 0;
    }
    p {
      color: #fff;
    }
  }
  .van-grid-item__icon {
    font-size: 120px;
  }
  .van-grid-item__text {
    font-size: 16px;
  }
}
</style>